<template>
    <div class="big-card">
        <div class="card-tile-box">
            <div class="title">{{ title }}</div>
            <div class="operate-box">
                <slot name="operate"></slot>
            </div>
        </div>
        <div class="content-box">
            <slot name="content">
            </slot>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps({
    title: {
        type: String,
        default: ''
    }
})
</script>

<style scoped lang='scss'>
.content-box {
    padding-top: 10px;
    flex: 1;
    overflow: hidden;
}

.operate-box {
    position: absolute;
    top: -5px;
    right: 0;
}

.big-card {
    background-color: #fff;
    border-radius: $b-border-radius-10;
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;

    .card-tile-box {
        display: flex;
        border-bottom: 1px solid rgb(228, 231, 235);
        padding-bottom: 15px;
        align-items: center;
        justify-content: space-between;
        position: relative;

        .title {
            font-size: 16px;
            font-weight: bold;
        }
    }
}
</style>
